<template>
  <div id="loginFail">
    <!-- <transition enter-active-class="animated bounceInDown"
                    leave-active-class="animated hinge">
            <div v-if="show">hello</div>
    </transition>-->
    <img width="100%" height="100%" src="/../../static/img/loginfail.jpg" class="bg_img">
    <div :class="[box,animated,bounceInDown]">
      <p>hhh~请重新登录~</p>
      <p>
        <strong id="shijian" ref="shijian">{{times}}</strong>秒后回到
        <router-link to="/Login" class="logincolor">登录页</router-link>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginFail",
  data() {
    return {
      box: "box",
      animated: "animated",
      bounceInDown: "bounceInDown",
      times: 5
    };
  },
  methods: {
    changeText() {
      const self = this;
      let shijian = this.$refs.shijian.innerHTML;
      let time = setInterval(function() {
        self.times--;
        shijian = self.times;
        if (self.times == 1) {
          self.bounceInDown = "hinge";
        }
        if (self.times == 0) {
          self.$router.push("/Login");
          clearInterval(time);
        }
      }, 1000);
    }
  },
  mounted() {
    this.changeText();
  },
  watch: {
    bounceInDown: function(newValue, oldValue) {
      this.bounceInDown = newValue;
    }
  }
};
</script>

<style scoped>
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -120px;
  margin-top: -50px;
  color: #fff;
}
.box p:nth-of-type(1) {
  font-size: 36px;
}
.box p:nth-of-type(2) {
  font-size: 28px;
}
.logincolor {
  color: rgb(148, 229, 95);
}
.bg_img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  background-color: rgb(232, 234, 237);
}
</style>
